<template>
  <vxe-pulldown ref="xDown" transfer destroy-on-close  style="width:100%;"
  @hide-panel="onHidePanel">
    <template #default>
      <!-- <FormItem label="供应商" v-bind="validateInfos['data.supId']">
        <a-input-search v-model:value="supplierName"
          title="快捷键: alt+s 聚焦"
          accessKey="s"
          placeholder="按供应商编号、名称查找"
          @click="supplierOnClick"
          @search="supplierOnClick"
          @change="supplierOnChange"
          @blur="supplierOnBlur"
          >
        </a-input-search>
      </FormItem> -->
      <slot name="input_"></slot>
    </template>
    <template #dropdown>
      <div style="width:650px;">
        <vxe-grid ref="supplierXGridRef" border auto-resize size="mini" height="300"
          class="mytable-style"
          :row-class-name="rowClassName"
          :row-config="{isHover: true, isCurrent: true, keyField: 'id', useKey: true, }"
          :keyboard-config="{isArrow: true, isEnter: false,}"
          :radio-config="{highlight: true, visibleMethod: ({row}) => row.enable === 1}"
          :data="supplierList.tableData"
          :columns="supplierColumns"
          @keydown="supplierOfKeydown"
          @cell-click="supplierOfCellClick">
        </vxe-grid>
      </div>
    </template>
  </vxe-pulldown>
</template>
<script lang="ts" name="xPulldownOfSupplier" setup>
import {reactive, ref, toRaw, watch, watchPostEffect,} from 'vue';
import {VxeTablePropTypes, VxePulldownInstance,} from 'vxe-table';
import XEUtils from 'xe-utils'
import {getListData as getSupListData} from '/@/api/bd/supplier';
import {supplierColumns,} from '../data';
import __ from 'lodash-es'

const props = defineProps({
  id: {type: [Number, null] as PropType<Number | null>, default: null,},
  name: String,
})

const emits = defineEmits(['selected-one', 'empty'])

const xDown = ref<VxePulldownInstance>()
const supplierList = reactive({
  tableData: [] as any[], // 筛选后的数据
  listData: [] as any[], // 原始的数据
})
const selectedRow = ref()

// watchPostEffect(async () => {
//   getSupListData().then(dd => {
//     supplierList.tableData = dd as never[];
//     supplierList.listData = dd as never[];
//   })
// })

const supplierXGridRef = ref()
const supplierOfKeydown = ({ $event }) => {
  if ($event.keyCode === 13 || $event.key === 'Enter') {
    let row = supplierXGridRef.value.getCurrentRecord()
    if (row && row.enable === 1) {
      xDown.value?.hidePanel()
      emits('selected-one', toRaw(row))
    }
  }
}
const supplierOfCellClick = ({row}) => {
  if (row.enable === 1) {
    selectedRow.value = toRaw(row)
    emits('selected-one', toRaw(row))
    xDown.value?.hidePanel()
  }
}

const rowClassName: VxeTablePropTypes.RowClassName = ({ row, }) => {
  if (row.enable !== 1) {
    return 'row-enable'
  }
  return null
}

watch(() => props.name, (v1, _) => {
  if (v1) {
    supplierList.tableData = supplierList.listData.filter((row:any) => {
      return (
        row?.name.indexOf(v1) > -1
        || row?.code.indexOf(v1) > -1
        || row?.phone.indexOf(v1) > -1)
    })
  } else {
    supplierList.tableData = supplierList.listData.slice(0)
  }
})

const onHidePanel = () => {
  selectedRow.value = null
  if (!supplierList.listData.some(e => e.name === props.name)) {
    emits('empty')
  }
  supplierList.tableData = []
  supplierList.listData = []
}

defineExpose({
  show: () => {
    if (xDown.value?.isPanelVisible()) {
      xDown.value?.hidePanel()
    } else {
      xDown.value?.showPanel().then(() => {
        // 每次都拉取数据
        getSupListData().then(dd => {
          let tableData = dd.filter(e => {
            if (!props.id && props.name) {
              return XEUtils.toValueString(e.name).toLowerCase().indexOf(props.name) !== -1
            } else {
              return true
            }
          })
          supplierList.tableData = tableData as never[];
          supplierList.listData = dd as never[];
        })
        supplierXGridRef.value.focus()
      })
    }
  },
})
</script>
<style scoped>
:deep().mytable-style .vxe-body--row.row-enable {
  opacity: .5;
}
</style>
